<template>
  <div class="container">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb class="boxBread" v-if="isOK">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{EditData.subjectName}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <PageTools
        :tagNum="this.pageObj.total"
        :formData="formData"
        ref="pageTools"
      >
        <template v-slot:input>
          <el-form-item label="标签名称" prop="inputName">
            <el-input
              placeholder="请输入内容"
              v-model="formData.inputName"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="formData.state" placeholder="请选择">
              <el-option value="启用"></el-option>
              <el-option value="禁用"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:button>
          <el-button @click="resetForm" size="small">清除</el-button>
          <el-button type="primary" size="small" @click="searchTag"
            >搜索</el-button
          >
        </template>
        <template v-slot:add>
          <el-link icon="el-icon-back" type="primary" v-if="isOK" @click="$router.back()">返回学科</el-link>
          <el-button type="success" icon="el-icon-edit" @click="addTag"
            >新增标签</el-button
          >
        </template>
      </PageTools>
      <el-table
        :header-cell-style="{ backgroundColor: '#fafafa' }"
        :data="tableData"
        border
        style="width: 100%; padding: 20px"
      >
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="180">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="180">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="180">
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button type="text" @click="prohibit(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 0"
              @click="EditDialog(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 0"
              @click="delTag(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageObj.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="pageObj.total"
        style="margin-top: 20px; text-align: right"
      >
      </el-pagination>
    </el-card>

    <!-- 修改弹出层 -->
    <el-dialog
      title="修改目录"
      :visible="showEditDialog"
      class="showEditDialog"
      style="width: 50%"
      @close="btnEditCancel"
    >
      <el-form :model="EditData" :rules="rules" ref="EditForm">
        <el-form-item label="所属学科" prop="subjectName" v-if="!isOK">
          <el-select
            v-model="EditData.subjectName"
            style="width: 80%"
            size="small"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            v-model="EditData.tagName"
            style="width: 80%"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row slot="footer" style="text-align: right">
        <el-col>
          <el-button @click="btnEditCancel">取消</el-button>
          <el-button type="primary" @click="saveEdit()">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 删除弹出层 -->
    <TagsDel
      :dialogVisible.sync="showDelDialog"
      :id="tagId"
      @loadTagList="TagsList"
    ></TagsDel>
    <!-- 新增弹出层 -->
    <tagAdd
      :showAddDialog.sync="showAddDialog"
      :subjectList="subjectList"
      :EditData="EditData"
      :rules="rules"
      @loadTagtList="TagsList"
      :isOK="isOK"
    ></tagAdd>
  </div>
</template>

<script>
import tagAdd from '../components/tags-add.vue'
import { list, changeState, update as updateTags } from '@/api/hmmm/tags'
import TagsDel from '../components/tags-del.vue'
import PageTools from '../components/page-tools.vue'
import { list as SubjectList } from '@/api/hmmm/subjects'
export default {
  components: {
    PageTools,
    TagsDel,
    tagAdd
  },
  data () {
    return {
      formData: {
        inputName: '',
        state: ''
      },
      tableData: [],
      pageObj: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      currentPage: 1,
      showEditDialog: false,
      EditData: {
        subjectName: '',
        tagName: '',
        subjectID: ''
      },
      rules: {
        subjectName: [
          { required: true, trigger: 'blur', message: '所属学科不能为空' }
        ],
        tagName: [
          { required: true, trigger: 'blur', message: '目录名称不能为空' }
        ]
      },
      subjectList: [],
      tagObject: {},
      showDelDialog: false,
      tagId: {
        id: ''
      },
      showAddDialog: false,
      isOK: false
    }
  },
  computed: {
    // prohibitText () {
    //   return this.pageObj.state
    // }
  },
  created () {
    this.TagsList()
    this.loadSubjectList()
  },
  methods: {
    async TagsList () {
      // this.$route.query 可以拿到路由跳转之后的值
      this.EditData.subjectID = this.$route.query.id
      this.EditData.tagName = this.$route.query.name
      if (this.$route.query.id) {
        // console.log('11')
        // console.log(this.EditData)
        this.isOK = true
        const { data } = await list(this.EditData)
        this.tableData = data.items
        this.pageObj.total = data.counts
      } else {
        this.isOK = false
        const { data } = await list(this.pageObj)
        // console.log(data)
        this.tableData = data.items
        this.pageObj.total = data.counts
      }

      // console.log(data.items[0].state)
      // console.log(this.tableData)
    },
    handleSizeChange (newPagesize) {
      this.pageObj.pagesize = newPagesize
      // 重新拉取数据
      this.TagsList()
    },
    handleCurrentChange (newPage) {
      this.pageObj.page = newPage
      // 重新拉取数据
      this.TagsList()
    },
    async prohibit (row) {
      // 每次点击改为相反的状态
      row.state = row.state === 1 ? 0 : 1
      await changeState({ id: row.id, state: row.state })
      this.$message.success('更换成功')
    },
    async loadSubjectList () {
      const { data } = await SubjectList()
      // console.log(data)
      this.subjectList = data.items
      // console.log(this.subjectList)
    },
    EditDialog (row) {
      // 同步标签名 和 目录名
      this.EditData.subjectName = row.subjectName
      this.EditData.tagName = row.tagName
      this.showEditDialog = true
      this.tagObject = row
    },
    async saveEdit () {
      await this.$refs.EditForm.validate()
      // 回写标签名 和 目录名
      this.tagObject.subjectName = this.EditData.subjectName
      this.tagObject.tagName = this.EditData.tagName
      // 保存数据
      await updateTags(this.tagObject)
      // 提示成功
      this.$message.success('保存成功')
      // 拉取数据
      this.loadSubjectList()
      // 关闭弹层
      this.showEditDialog = false
    },
    btnEditCancel () {
      this.EditData = {
        subjectName: '',
        tagName: ''
      }
      this.$refs.EditForm.resetFields()
      // 关闭弹层
      this.showEditDialog = false
    },
    delTag (id) {
      this.showDelDialog = true
      // 调用删除组件的方法
      this.tagId.id = id
    },
    addTag () {
      this.showAddDialog = true
    },
    resetForm () {
      // 执行子组件的方法
      this.$refs.pageTools.resetForm('ruleForm')
    },
    async searchTag () {
      // 这里要重新调用接口获取原数组 因为后边变化了
      const { data } = await list(this.pageObj)
      this.tableData = data.items
      const state = this.formData.state === '启用' ? 1 : 0
      var searchList = []
      if (this.formData.inputName === '' && this.formData.state === '') {
        searchList = this.tableData
      } else if (this.formData.inputName && this.formData.state === '') {
        searchList = this.tableData.filter((item) => {
          return item.tagName === this.formData.inputName
        })
      } else if (this.formData.state === '启用') {
        // console.log('111')
        searchList = this.tableData.filter((item) => {
          return item.state === state
        })
      } else if (this.formData.state === '禁用') {
        // console.log('222')
        searchList = this.tableData.filter((item) => {
          return item.state === state
        })
      } else {
        searchList = this.tableData.filter((item) => {
          return (
            item.tagName === this.formData.inputName && item.state === state
          )
        })
      }

      // 更新数组
      this.tableData = searchList
    },
    btnAddCancel () {
      this.EditData = {
        subjectName: '',
        tagName: ''
      }
      this.showAddDialog = false
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .container {
  padding: 0 10px;
  .showEditDialog {
    margin: auto;
  }
}
</style>
